<template>
	<view>
		<cu-custom bgColor="bg-blue" bgImage="../../static/icon/custom-tabar.png">
			<block slot="content">我</block>
		</cu-custom>
		<scroll-view scroll-y class="page">

			<view class="user flex">
				<image :src="user.pic" class="cu-avatar tour" @click="goMyDesc"></image>
				<view class="flex flex-direction margin-left justify-around">
					<text class="name">{{ user.nicname || '昵称'}}</text>
					<view>
						<text class="inveo">{{"邀请码：" + user.invitcode}}</text>
					</view>
					<image src="../../static/my/isVip.png" class="isvip" v-if="user.ismember"></image>
				</view>
			</view>
			<!-- 查看明细  -->
			<view class="balance">
				<image src="../../static/my/card-bg.png"></image>
				<view class="balance-number">
					<text class="balance-number-title block" style="width: 100px;" @click="goMoneyListPage">查看明细</text>
					<view class="flex align-center justify-center">

						<view class="flex-sub flex-direction padding-sm">
							<view class="text-center color-fff font-num"><text>{{user.money}}</text></view>
							<view class="text-center color-fff font-text margin-top">余额</view>
						</view>
						<view class="line"></view>
						<view class="flex-sub flex-direction padding-sm">
							<view class="text-center color-fff font-num">{{user.djmoney}}</view>
							<view class="text-center color-fff font-text margin-top">冻结金额</view>
						</view>
					</view>
				</view>
				<view class="round bg-red tixian"><text style="margin: auto;">提现</text></view>
			</view>

			<!-- 常用 -->
			<view class="bg-white padding">
				<text class="h1">常用</text>
				<view class="grid text-center" :class="'col-4'">
					<view class="padding" @click="goVipPage">
						<view class="flex flex-direction align-center">
							<image src="../../static/my/vip.png" class="changyong"></image>
							<text style="margin-top: 6px;">开通会员</text>
						</view>
					</view>
					<view class="padding" @click="goFanPianZhiNianPage">
						<view class="flex flex-direction align-center">
							<image src="../../static/my/fanpianzhinian.png" class="changyong"></image>
							<text style="margin-top: 6px;">防骗指南</text>
						</view>
					</view>
					<view class="padding" @click="goInvitPage">
						<view class="flex flex-direction align-center">
							<image src="../../static/my/invite.png" class="changyong"></image>
							<text style="margin-top: 6px;">邀请赚钱</text>
						</view>
					</view>
					<view class="padding" @click="goJuBaoPage">
						<view class="flex flex-direction align-center">
							<image src="../../static/my/jubao.png" class="changyong"></image>
							<text style="margin-top: 6px;">举报有奖</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 更多 -->
			<view class="bg-white padding margin-top">
				<text class="h1">更多</text>
				<view class="grid text-center" :class="'col-4'">
					<view class="padding" @click="goMyActivesPage">
						<view class="flex flex-direction align-center">
							<image src="../../static/my/content-me.png" class="changyong"></image>
							<text style="margin-top: 6px;">我的活动</text>
						</view>
					</view>
					<view class="padding" @click="goRenZhengPage">
						<view class="flex flex-direction align-center">
							<image src="../../static/my/shimingrenzheng.png" class="changyong"></image>
							<text style="margin-top: 6px;">实名认证</text>
						</view>
					</view>
					<view class="padding" @click="goBackListPage">
						<view class="flex flex-direction align-center">
							<image src="../../static/my/heimingdan.png" class="changyong"></image>
							<text style="margin-top: 6px;">黑名单</text>
						</view>
					</view>
					<view class="padding" @click="clearHistort">
						<view class="flex flex-direction align-center">
							<image src="../../static/my/clear-cace.png" class="changyong"></image>
							<text style="margin-top: 6px;">清空缓存</text>
						</view>
					</view>

					<view class="padding" @click="goFeedbackPage">
						<view class="flex flex-direction align-center">
							<image src="../../static/my/yijianfankui.png" class="changyong"></image>
							<text style="margin-top: 6px;">意见反馈</text>
						</view>
					</view>
					<view class="padding">
						<view class="flex flex-direction align-center">
							<image src="../../static/my/kefu.png" class="changyong"></image>
							<text style="margin-top: 6px;">客服咨询</text>
						</view>
					</view>
					<view class="padding" @click="goAboutPage">
						<view class="flex flex-direction align-center">
							<image src="../../static/my/about-me.png" class="changyong"></image>
							<text style="margin-top: 6px;">关于我们</text>
						</view>
					</view>
					<view class="padding" @click="goAettingPage">
						<view class="flex flex-direction align-center">
							<image src="../../static/my/setting.png" class="changyong"></image>
							<text style="margin-top: 6px;">设置</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {

			};
		},
		computed: {
			...mapState({
				//这里可以通过这种方式引用相应模块的state数据，其中user是模块名。在代码的其他部分可以使用this.userInfo访问数据
				user: ({
					user
				}) => user.userInfo,
			}),
		},

		methods: {
			//详情页面 
			goMyDesc() {
				uni.navigateTo({
					animationDuration: 200,
					url: '../desc/desc'
				})
			},
			// 查看明细
			goMoneyListPage() {
				uni.navigateTo({
					url: '../cash/cashlist',
					animationDuration: 200
				})
			},
			// 进入开通会员页面
			goVipPage() {
				uni.navigateTo({
					url: '../vip/vip',
					animationDuration: 200
				})
			},
			// 防骗指南
			goFanPianZhiNianPage() {
				uni.navigateTo({
					animationDuration: 200,
					url: '../setting/htmlrender?sysaction=防骗指南'
				})
			},
			// 邀请赚钱
			goInvitPage() {
				uni.reLaunch({
					url: '../index/index?PageCur=grow'
				})
			},
			// 举报有奖
			goJuBaoPage() {
				uni.navigateTo({
					animationDuration: 200,
					url: '../setting/htmlrender?sysaction=举报有奖'
				})
			},
			// 我的活动
			goMyActivesPage() {
				uni.navigateTo({
					animationDuration: 200,
					url: '../myactivities/myactivities'
				})
			},
			// 实名认证
			goRenZhengPage() {
				uni.navigateTo({
					animationDuration: 200,
					url: '../realName/realName'
				})
			},
			// 黑名单
			goBackListPage() {
				uni.navigateTo({
					url: '../blacklist/blacklist',
					animationDuration: 200
				})
			},
			// 意见反馈
			goFeedbackPage() {
				uni.navigateTo({
					url: '../feedback/feedback',
					animationDuration: 200
				})
			},
			// 关于我们
			goAboutPage() {
				uni.navigateTo({
					url: '../about/about',
					animationDuration: 200
				})
			},
			// 关于我们
			goAettingPage() {
				uni.navigateTo({
					url: '../setting/setting',
					animationDuration: 200
				})
			},
			// 清空缓存
			clearHistort() {
				try {

					const token = uni.getStorageSync('token');
					const user = uni.getStorageSync('user');
					uni.clearStorageSync()
					uni.setStorageSync("user", user);
					uni.setStorageSync('token', token);
					uni.showLoading({
						title: '清理中成功'
					});
					setInterval(() => {
						uni.hideLoading();
					}, 1000)
				} catch (e) {
					uni.showLoading({
						title: '清理中失败'
					});
					setInterval(() => {
						uni.hideLoading();
					}, 1000)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding-bottom: 100upx;
		height: calc(100vh - (100upx + env(safe-area-inset-bottom) / 2));
	}

	.user {
		padding: 13px;

		.tour {
			width: 80px;
			height: 80px;
		}

		.isvip {
			height: 24px;
			width: 76px;
		}

		.name {
			font-size: 18px;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 25px;
			color: #333333;
		}

		.inveo {
			font-size: 12px;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 17px;
			color: #333333;
		}
	}

	.balance {
		position: relative;
		padding: 13px;

		image {
			height: 130px;
			width: 100%;
		}

		&-number {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			padding: 16px;

			&-title {
				margin: 11px 20px;
				font-size: 14px;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 16px;
				color: #FFFFFF;
			}
		}

		.tixian {
			position: absolute;
			top: 0;
			right: 13px;
			display: flex;
			justify-items: center;
			justify-content: center;
			height: 26px;
			width: 57px;
			font-weight: bold;
			line-height: 20px;

		}

		.color-fff {
			color: #FFFFFF;
		}

		.font-num {
			font-size: 30px;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 17px;
			color: #FFFFFF;
		}

		.font-text {
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 16px;
			color: #FFFFFF;
		}

		.line {
			width: 0px;
			height: 42px;
			border: 1px solid #E6E6E6;
			position: absolute;
			top: 54px;
		}
	}

	.h1 {
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 16px;
		color: #333333;
	}

	.changyong {
		width: 34px;
		height: 34px;
	}
</style>
